<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-3.7.1.min.js"></script>

    <style>
        div {
            width: 300px;
            height: 300px;
        }

        .divborder {
            border: aqua solid 5px;
        }

        .divbg {
            background-color: coral;
        }

    </style>
</head>
<body>


<!--静态初始化样式-->
<!--<div class="divbg divborder">-->
<div class="divbg divborder">
    div1
</div>


<button id="btn1">修改css</button>
<script>

    $("#btn1").on('click', function () {
        // $("div:first").toggleClass('divbg')
        let flag = $("div:first").hasClass('divbg');
        console.log(flag);
    })
    //先添加 动态初始化样式
    // $("div:first").addClass('divborder divbg');
    //删除
    // $("div:first").removeClass('divbg');

    // $("div:first").css('background-color', 'red');

    // console.log($("div:first").css('background-color'));

</script>

</body>
</html>